/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-01-31 11:06:15
 */
import { routes } from '@/router'
import { equals, map } from 'ramda'
import { computed, defineComponent, h, KeepAlive, reactive, watch } from 'vue'
import { RouteRecordRaw, useRoute } from 'vue-router'
import './style.scss'
export default defineComponent({
	name: 'Settings',
	setup() {
		const route = useRoute()
		const children = computed<RouteRecordRaw[]>(() => {
			const index = routes.findIndex((item) => equals(item.path, '/'))
			return routes[index].children?.find((item) => equals(item?.name, 'Settings'))?.children ?? []
		})
		const cacheView = reactive({
			includeList: [] as string[],
		})
		watch(
			() => children.value,
			(data) => {
				cacheView.includeList = (data.map((item) => item.name) as string[]) ?? []
			},
			{ deep: true, immediate: true }
		) // 开启深度监听
		return () => (
			<div id="settings">
				<header>我的设置</header>
				<section>
					<aside class="settings-menu">
						{map(
							(item) => {
								return (
									<router-link to={item.path}>
										<div class={route.path === item.path ? 'isActive' : ''}>
											<span>
												{h(item.meta?.icon as object, { ...(item.meta?.props ?? {}), style: item.meta?.style })}
											</span>
											{item.meta?.title}
										</div>
									</router-link>
								)
							},
							children.value.filter((item) => item.meta?.alwaysShow)
						)}
					</aside>
					<main class="settings-container">
						<router-view
							v-slots={{
								default: (scope: { Component: any }) => {
									return <KeepAlive include={cacheView.includeList ?? []}>{scope.Component}</KeepAlive>
								},
							}}
						/>
					</main>
				</section>
			</div>
		)
	},
})
